<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane label="角色管理">
            <!-- 角色管理的内容 -->
            <el-row style="height:60px">
              <el-button icon="el-icon-plus" type="primary" size="small" @click="showDialog = true">新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <!-- 给表格绑定数据 -->
            <el-table border :data="list">
              <el-table-column align="center" type="index" label="序号" width="120"></el-table-column>
              <el-table-column align="center" prop="name" label="名称" width="240"></el-table-column>
              <el-table-column align="center" prop="description" label="描述"></el-table-column>
              <el-table-column align="center" label="操作">
                <!-- 利用作用域插槽解构一个row  row是每行的数据 -->
                <template slot-scope="{ row }">
                  <el-button size="small" type="success" @click="assignPerm(row.id)">分配权限</el-button>
                  <el-button size="small" type="primary" @click="editRole(row.id)">编辑</el-button>
                  <!-- 定义删除事件 -->
                  <el-button size="small" type="danger" @click="deleteRole(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 放置分页组件 -->
            <el-row type="flex" justify="center" align="middle" style="heitgt:60px">
                                                            <!-- 当前页数                  每页条数                        总条数-->
              <el-pagination @current-change="changePage" :current-page="page.page" :page-size="page.pagesize" :total="page.total" layout="prev, pager, next"></el-pagination>

            </el-row>
          </el-tab-pane>
          <el-tab-pane label="公司信息">
            <!-- 警告 closable这个属性传的是boolean值,得加冒号,不然就变成字符串了 -->
            <el-alert :show-icon='true' :closable='false' type="info" title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"></el-alert>
            <!-- 公司信息的内容 -->
            <el-form label-width="120px" style="margin-top:50px">
              <el-form-item label="企业名称">
                <el-input v-model="formData.name" disabled style="width:400px"></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="formData.companyAddress" disabled style="width:400px"></el-input>
              </el-form-item>
              <el-form-item v-model="formData.companyPhone" label="电话">
                <el-input disabled style="width:400px"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="formData.mailbox" disabled style="width:400px"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="formData.remarks" type="textarea" :rows="3" disabled style="width:400px"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 放置编辑的弹层组件                                   close事件点击确定的时候也会触发  因为弹层在关闭的时候会触发close事件--> 
    <el-dialog :title="showTitle" :visible='showDialog' @close='btnCancel'>
      <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="120px">
        <el-form-item prop="name" label="角色名称">
          <el-input v-model="roleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="roleForm.description"></el-input>
        </el-form-item>
      </el-form>
      <!-- 放置footer插槽  取消确定 -->
      <el-row type="flex" justify="center">
        <el-col :span='8'>
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOk">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 放置分配权限的弹层 -->
    <el-dialog title="分配权限" :visible='showPermDialog' @close='btnPermCancel'>
      <el-tree
      :data="permData"
      :props="defaultProps"
      :default-expand-all="true"
      :show-checkbox="true"
      :check-strictly="true"
      :default-checked-keys="selectCheck"
      node-key="id"
      ref="permTree"
      />
      <!-- 确认和取消部分 -->
       <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary"  @click="btnPermOK">确定</el-button>
          <el-button size="small" @click="btnPermCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList,getCompanyInfo,deleteRole,getRoleDetail,updateRole,addRole } from '@/api/setting'
import { mapGetters } from "vuex";
import { getPermissionList } from "@/api/permission";
import { tranListToTreeData } from "@/utils";
import { assignPerm } from '@/api/setting'
export default {
  data () {
    return {
      list:[],  //用来接收数据
      page:{
        // 放置页码及相关数据
        page:1,   //当前页数
        pagesize:10,   //每页的条数
        total:0   //总条数
      },
      //权限数据
      permData:[],  //接收权限数据
      defaultProps: {
        label: 'name'
      }, //定义显示字段的名称  和 子属性的名称
      formData:{
        // 存放公司信息
      },
      showDialog:false, //控制弹层显示
      showPermDialog: false, //控制分配权限弹层的显示
      roleId:null, //用来记录当前分配权限的id
      selectCheck:[],  //用来记录当前权限点的标识
      // 弹层绑定数据
      roleForm:{
        name:'',
        description:'',
      },
      rules:{
        name:[{
          required: true,
          message:'角色名称不能为空',
          trigger:'blur'
        }]
      }
    }
  },
  computed: {
    ...mapGetters(['companyId']),
    showTitle(){
      return this.roleForm.id ? '编辑角色' : '新增角色'
    }
  },
  created () {
    // 调用获取公司角色列表数据的方法
    this.getRoleList()
    // 调用获取公司信息的方法
    this.getCompanyInfo()
  },
  methods: {
    async getRoleList(){
      const {total,rows} = await getRoleList(this.page)
      this.page.total = total
      this.list = rows
    },
    async getCompanyInfo(){
      this.formData = await getCompanyInfo(this.companyId)
    },
    changePage(newPage){
      // newPage是当前点击的页码
      this.page.page = newPage  //将当前页码赋值给当前的最新页码
      // 重新获取数据
      this.getRoleList()
    },
    // 删除按钮的点击事件触发的方法
    async deleteRole(id){
      try {
        await this.$confirm('确定删除该角色吗')
        await deleteRole(id)
        // 获取删除后的数据
        this.getRoleList()
        // 提示弹窗删除成功
        this.$message.success('删除角色成功')
      } catch (error) {
        console.log(error);
      }  
    },
    async editRole(id){
      // 先回写在弹层，就不会有数据一闪而过的情况了
      this.roleForm = await getRoleDetail(id) //实现数据回写
      this.showDialog = true   //显示弹层
    },
    // 确认按钮的点击事件触发的方法
    async btnOk(){   
      try {
        await this.$refs.roleForm.validate()  //validate不传参数的话返回的是一个promise对象
        if (this.roleForm.id) {
          // 编辑
          // 调用修改角色的接口
        await updateRole(this.roleForm)
        }else{
          // 新增
          await addRole(this.roleForm)
        }
        // 重新拉数据
        this.getRoleList()
        this.$message.success('操作成功')
        this.showDialog = false   //关闭弹层 触发close事件 btnCancel方法
      } catch (error) {
        console.log(error);
      }             
    },
    btnCancel(){
      this.roleForm = {
        name:'',
        description:'',
      }
      this.$refs.roleForm.resetFields()
      this.showDialog = false
    },
    // 点击分配权限触发的方法
    async assignPerm(id){
      this.permData = tranListToTreeData(await getPermissionList(),'0')  //得到一个树形数据的权限信息
      this.roleId = id 
      const { permIds } = await getRoleDetail(id) // permIds是当前角色所拥有的权限点数据  里面保存的是数据的id
      this.selectCheck = permIds
      this.showPermDialog = true
    },
    // 点击分配权限弹窗中的确定触发的方法
    async btnPermOK(){
      // getCheckedKeys()若节点可被选择，则返回目前被选中的节点的 key 所组成的数组
      await assignPerm({permIds: this.$refs.permTree.getCheckedKeys(), id: this.roleId})
      this.$message.success('分配权限成功')
      this.showPermDialog = false
    },
    // 点击分配权限弹窗中的取消按钮触发的方法
    btnPermCancel(){
      this.selectCheck = [] //重置数据
      this.showPermDialog = false
    }
  }
}
</script>

<style>

</style>
